<!--公司公告-消息列表（客户） NoticeMessageCustomer-->
<template>
  <div class='page_format'>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="shape" label="栏目">
        <template v-slot="scope">
          <span>{{ getNoticeColumnText(scope.row.noticeColumnId) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="titleZh" label="公告标题"></el-table-column>
      <el-table-column prop="createTime" label="发布时间"></el-table-column>
      <el-table-column fixed="right" label="操作" width="80">
        <template v-slot="scope">
          <el-button @click="handleView(scope.row)" type="text" size="small">
            {{ '详情' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import wangEditor from '@/components/wangEditor/index.vue'
import { changSort } from '@/utils/aqi'

export default {
  name: '',
  data () {
    return {
      dialogVisible: false,
      judgeUserShow: false, // 用户判断
      userInfo: {},
      form: {
        noticeId: '',
        noticeColumnId: '',
        titleZh: '',
        titleEn: '',
        contentUrlZh: '',
        contentUrlEn: '',
        status: '',
        receiveObjectType: '',
        receiveObjectValue: '',
        remark: ''
      },
      richTextDTO: { // 富文本编辑
        richTextUrlZh: '',
        richTextUrlEn: ''
      },
      list: [],
      noticeColumnList: [],
      contentTextZh: '',
      contentTextEn: '',
      status: '',
      formLabelWidth: '140px',
      pageSize: 20,
      pageNum: 1,
      total: 0,
      queryValue: '',
      queryStatus: '1',
      receiveObjectValue: ''
    }
  },

  mounted () {
    this.$store.dispatch('getUserData').then(res => {
      this.userInfo = res.data.user
      this.judgeUserShow = this.userInfo.userType !== '02'
      this.getNoticeColumnList()
      this.getNoticeList()
    })
  },

  components: {
    wangEditor
  },

  methods: {
    // 排序 （序号）
    sort (index) {
      return changSort(index, this.pageNum, this.pageSize)
    },

    // 公告栏目
    getNoticeColumnText (value) {
      const dto = this.noticeColumnList.find(v => v.noticeColumnId === value)
      return dto && dto ? dto.name : ''
    },

    handleView (row) {
      // 固定的 baseUrl
      const baseUrl = 'https://tjd-system-oss.ss-tjd.com/dev/htmlUrl/RichTextCrmNotice.html?src='

      // 校验并获取 contentUrlZh
      const contentUrlZh = row.contentUrlZh ? row.contentUrlZh : ''
      if (!contentUrlZh) {
        this.$message.error('内容链接无效')
        return
      }

      // 校验并获取 titleZh
      const titleZh = row.titleZh ? row.titleZh : '消息公告'
      const encodedTitle = encodeURIComponent(titleZh) // URL 编码

      // 获取当前时间并格式化为 YYYY-MM-DD HH:mm:ss
      const currentTime = row.createTime
      const encodedTime = encodeURIComponent(currentTime) // URL 编码

      // 拼接完整 URL，增加 time 参数
      const targetUrl = `${baseUrl}${contentUrlZh}&title=${encodedTitle}&time=${encodedTime}`

      // 打开新页面
      try {
        window.open(targetUrl, '_blank')
      } catch (error) {
        console.error('跳转失败:', error)
        this.$message.error('跳转失败，请重试')
      }
    },

    // handleView (row) {
    //   // 固定的 baseUrl
    //   const baseUrl = 'https://cdn.ss-tjd.com/dev/htmlUrl/RichText.html?src='
    //
    //   // 校验并获取 contentUrlZh
    //   const contentUrlZh = row.contentUrlZh ? row.contentUrlZh : ''
    //   if (!contentUrlZh) {
    //     this.$message.error('内容链接无效')
    //     return
    //   }
    //   // 校验并获取 titleZh
    //   const titleZh = row.titleZh ? row.titleZh : '消息公告'
    //   const encodedTitle = encodeURIComponent(titleZh) // URL 编码
    //   // 拼接完整 URL
    //   const targetUrl = `${baseUrl}${contentUrlZh}&title=${encodedTitle}`
    //   // 打开新页面
    //   try {
    //     window.open(targetUrl, '_blank')
    //   } catch (error) {
    //     console.error('跳转失败:', error)
    //     this.$message.error('跳转失败，请重试')
    //   }
    // },

    getNoticeList () {
      this.list = []
      if (!this.judgeUserShow) {
        this.receiveObjectValue = this.userInfo.userName
      }
      console.log("ceshizhanghao" + this.receiveObjectValue)
      this.$store.dispatch('getNoticeList', {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        queryValue: this.queryValue,
        status: this.queryStatus,
        receiveObjectValue: this.receiveObjectValue
      }).then(res => {
        this.list = res.data
        this.total = res.total
      })
    },

    getNoticeColumnList () {
      this.$store.dispatch('getNoticeColumnList', {
        pageSize: 1000,
        pageNum: 1
      }).then(res => {
        this.noticeColumnList = res.data
      })
    },

    handleSelectionChange (val) {
      this.multipleSelection = val
    },

    handleQuery () {
      this.pageNum = 1
      this.getNoticeList()
    },

    handleSizeChange (val) {
      this.pageSize = val
      this.getNoticeList()
    },

    handleCurrentChange (val) {
      this.pageNum = val
      this.getNoticeList()
    },

    handleButtonClick (data) {
      this.id = data.id
      this.dialogVisible = true
    },

    is_show_button (name) {
      let show = false
      this.$store.state.module1.menu_list.forEach(v => {
        // eslint-disable-next-line eqeqeq
        if (v.path === name) {
          show = true
        }
      })
      return show
    }
  }
}
</script>

<style lang='scss'>
.page_format {
  padding: 56px 20px 140px 20px;
}

.search-form {
  margin-top: 10px;
}

.icon-image {
  width: auto;
  height: auto;
  object-fit: cover;
}
</style>
